<template>
  <el-card class="library-card" shadow="hover" @click="$emit('click', library)">
    <template #header>
      <div class="card-header">
        <span class="library-name">{{ library.name }}</span>
        <div class="header-stats">
          <!-- 添加 @click.stop 阻止事件冒泡，根据状态绑定样式 -->
          <span 
            class="stat-item" 
            @click.stop="handleLike"
            :class="{ 'active': currentUserLike }"
          >
            <!-- 给 el-icon 添加类名 -->
            <el-icon class="custom-icon">
              <Check />
            </el-icon> {{ library.likedAmounts || 0 }}
          </span>
          <span 
            class="stat-item" 
            @click.stop="handleCollect"
            :class="{ 'active': isCollected }"
          >
            <!-- 给 el-icon 添加类名 -->
            <el-icon class="custom-icon">
              <Star />
            </el-icon> {{ library.collectedAmounts || 0 }}
          </span>
          <span class="stat-item" @click.stop="handleComment">
            <!-- 给 el-icon 添加类名 -->
            <el-icon class="custom-icon">
              <ChatLineRound />
            </el-icon> {{ library.commentedAmounts || 0 }}
          </span>
        </div>
      </div>
    </template>
    <div class="library-info">
      <div>
        <span class="label">描述:</span>
        <!-- 使用 el-card 组件框起描述内容 -->
        <el-card class="description-card" shadow="hover">
          {{ library.description }}
        </el-card>
      </div>
      <!-- 使用 el-descriptions 组件展示数据 -->
      <div style="display: inline;">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建时间">{{ library.createTime }}</el-descriptions-item>
          <el-descriptions-item label="最近更新时间">{{ library.updateTime }}</el-descriptions-item>
          <el-descriptions-item label="文章篇数">{{ library.articleCount || 0 }}</el-descriptions-item>
          <!-- 移除原有的点赞数、收藏数和评论数显示 -->
        </el-descriptions>
      </div>
      <!-- 添加默认插槽 -->
      <slot></slot>
    </div>
  </el-card>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue';
import { Check, Star, ChatLineRound } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import require from '../require';

const props = defineProps({
  library: {
    type: Object,
    required: true,
    default: () => ({
      // 移除重复定义
      libraryId: '',
      name: '',
      description: '',
      articleCount: 0,
      createTime: '',
      updateTime: '',
      likedAmounts: 0,
      collectedAmounts: 0,
      commentedAmounts: 0,
      currentUserCollect: false,
      currentUserLike: false,
    })
  }
});

const emit = defineEmits(['click']);

const library = ref({ ...props.library });
// 记录点赞状态
const currentUserLike = ref(props.library.currentUserLike);
const isCollected = ref(props.library.currentUserCollect);

// 监听 props.library 变化
watch(() => props.library, (newLibrary) => {
  library.value = { ...newLibrary };
  currentUserLike.value = newLibrary.currentUserLike;
  isCollected.value = newLibrary.currentUserCollect;
}, { deep: true });

const handleLike = async () => {
  try {
    // 临时保存当前状态
    const tempLikedAmounts = library.value.likedAmounts + (currentUserLike.value ? -1 : 1);
    const tempCurrentUserLike = !currentUserLike.value;

    // 先更新本地状态
    library.value.likedAmounts = tempLikedAmounts;
    currentUserLike.value = tempCurrentUserLike;

    await require.post('/user/likeLibrary', {
      libraryId: library.value.libraryId
    });
  } catch (error) {
    // 请求失败，回滚状态
    library.value.likedAmounts -= currentUserLike.value ? -1 : 1;
    currentUserLike.value = !currentUserLike.value;
    ElMessage.error('点赞操作失败');
  }
};

const handleCollect = async () => {
  try {
    // 临时保存当前状态
    const tempCollectedAmounts = library.value.collectedAmounts + (isCollected.value ? -1 : 1);
    const tempIsCollected = !isCollected.value;

    // 先更新本地状态
    library.value.collectedAmounts = tempCollectedAmounts;
    isCollected.value = tempIsCollected;

    await require.post('/user/collectLibrary', {
      libraryId: library.value.libraryId
    });
  } catch (error) {
    // 请求失败，回滚状态
    library.value.collectedAmounts -= isCollected.value ? -1 : 1;
    isCollected.value = !isCollected.value;
    ElMessage.error('收藏操作失败');
  }
};

const handleComment = () => {
  ElMessage.info('点击了评论');
};
</script>

<style scoped>
.library-card {
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.library-name {
  font-size: 18px;
  font-weight: bold;
}

.library-info {
  display: flex;
  flex-direction: column;
}

.library-info > div {
  /* 修正属性值，正确的属性值为 first baseline 或 baseline */
  display: flex;
  margin-top: 12px;
  margin-bottom: 12px;
  align-items: baseline;
}

.info-item {
  display: flex;
  margin-top: 12px;
  margin-bottom: 12px;
  align-items: center;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  text-align: right;
  color: #606266;
}

.value {
  flex: 1;
  word-break: break-word;
  color: #303133;
}

/* 调整描述框样式 */
.description-card {
  flex: 1;
  margin-left: 10px;
  padding: 5px;
  text-indent: 2em; /* 首行缩进 2 个字符 */
  line-height: 1.6; /* 设置行高，让文本更易读 */
  font-size: 14px; /* 设置合适的字体大小 */
  word-wrap: break-word; /* 允许长单词或 URL 地址换行到下一行 */
  word-break: normal; /* 使用默认的换行规则，让单词在合适的位置换行 */
  white-space: normal; /* 正常处理空白符，自动换行 */
  text-align: left; /* 确保文本向左对齐 */
}

/* 新增统计信息样式 */
.header-stats {
  display: flex;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #606266;
}

/* 激活状态样式 */
.stat-item.active {
  color: #409EFF; /* 蓝色，可根据需求调整 */
}

/* 自定义图标样式，设置图标大小 */
.custom-icon {
  font-size: 30px; /* 可根据需求调整图标大小 */
}
</style>
